import React, { FC, useEffect, useState } from 'react'
import ChartPie from '@/components/pages/chartPie'
import ChartColumn from '@/components/pages/chartColumnRevert'
import Total from '@/components/pages/logistics/total'
import Transport from '@/components/pages/logistics/transport'
import ChartLine from '@/components/pages/chartLine'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import { inject, observer, PropTypes } from "mobx-react"
import Title from '@/components/pages/title'
import railway_url from '@/assert/images/logistics/railway.png'
import roadTransport_url from '@/assert/images/logistics/roadTransport.png'
import bg_verticle from '@/assert/images/backFrame.png'
import { ITransportCostsFull } from '@/types/pages/transportCosts/interface'
const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    .top{
      flex:1 1 48%;
      display: flex;
      flex-direction: row;
      .sale{
        flex:1 1 50%; 
        padding:3rem;
        display: flex;
        flex-direction: column;
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat; 
          .sale-content-top{
            flex:1 1 45%; 
            display: flex;
            flex-direction: column;  
            .content{
              flex:1 1 75%; 
              display: flex;
              flex-direction: row; 
              padding-left: 5rem;
            padding-right: 5rem;
              .sale-count,.sale-money,.sale-total{ 
              flex:1 1 33%; 
            }
            }
         
          }
       
        }
        .sale-content{
          flex:1 1 55%;   
          display: flex;
          flex-direction: column;  
          .content{
            flex:1 1 75%; 
            display: flex;
            flex-direction: row; 
            .sale-total{
            flex:1 1 30%; 
            margin: 1rem;
          }
          .sale-count,.sale-money{ 
            flex:1 1 30%;
            margin: 1rem;
          }
          }
        
        }
      
      }
      .species{
        flex:1 1 25%;
        position:relative;  
      }
      .money{
        flex:1 1 25%;
        position:relative; 
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      } 
    }
    .bottom{
      flex:1 1 52%;
      display: flex;
      flex-direction: row;
      .chart-line{
        flex:1 1 70%; 
        display: flex; 
        .left-pie,.right-pie{
          flex:1;
        }
      }
      .chart-colmn{
        flex:1 1 25%;  
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
`

const Content: FC<{}> = function () {
  const store = useStores();
  const { transportCarriage, transportCosts, categoryPie,
    accountsT10Column, profitT10Column, tendencyLine } = store.transportCosts.screenData;
  const fnCallBack: FnCallBack = (data: Partial<ITransportCostsFull>) => {
    store.header.srtScreenData(data);
    // setScreenData(store.header.headerControl.screenData);
    store.header.setHeaderName('物流费用');
    document.title = '物流费用';
  };
  useEffect(() => {
    store.transportCosts.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.transportCosts.getScreenData(type, date)
      fnCallBack<Partial<ITransportCostsFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='top'>
        <div className='sale'>

          <div className='sale-content-top'>
            <Title name="承运" style={{ paddingTop: '1rem' }} />
            <div className='content'>
              <div className='sale-total'>
                <Total num={transportCarriage.carriage?.num} unit={transportCarriage.carriage?.unit} text={transportCarriage.carriage?.name} />
              </div>
              <div className='sale-count'>
                <Total num={transportCarriage.train?.num} unit={transportCarriage.train?.unit} text={transportCarriage.train?.name} /></div>
              <div className='sale-money'>
                <Total num={transportCarriage.car?.num} unit={transportCarriage.car?.unit} text={transportCarriage.car?.name} /></div>
            </div>
          </div>

          <div className='sale-content'>
            <Title name="运输成本" style={{ paddingTop: '1rem' }} />
            <div className='content'>
              <div className='sale-total'>
                <Transport height='14.8rem' text="总成本"{...transportCosts.carriage}
                  ImgUrl={railway_url} />
              </div>
              <div className='sale-count'>
                <Transport text="铁路"
                  height='14.8rem'
                  {...transportCosts.train}
                  ImgUrl={railway_url} />
              </div>
              <div className='sale-money'>
                <Transport text="公路" {...transportCosts.car}
                  height='14.8rem'
                  ImgUrl={roadTransport_url} />
              </div>
            </div>

          </div>
        </div>
        <div className='species'>   <ChartPie title={categoryPie.title!} dataset={categoryPie.dataset} /></div>
        <div className='money'> <ChartColumn title={accountsT10Column.title!} dataset={accountsT10Column.dataset!} /></div>
      </div>
      <div className='bottom'>
        <div className='chart-line' > <ChartLine title={tendencyLine.title!} dataset={tendencyLine.dataset!} /></div>
        <div className='chart-colmn'><ChartColumn title={profitT10Column.title!} dataset={profitT10Column.dataset!} /></div>

      </div>

    </ContentFrame>
  )
}

export default observer(Content) 
